<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
      span {
         display: inline-block;
         width: 80px;
         height: 80px;
         border-radius: 50%;
         border: 1px solid white;
         opacity: 0.1;
      }
      .light {
         opacity: 1;
      }
      #red {
         background-color: red;
      }
      #yellow {
         background-color: yellow;
      }
      #green {
         background-color: green;
      }
      #time {
         margin-left: 30px;
         font-size: 70px;
      }
   </style>
</head>

<body>
   <p>
      <span id="red" class="light"></span>
      <span id="yellow"></span>
      <span id="green"></span>
      <b id="time">10</b>
   </p>
   <script>
      var current = 'red';
      var time = 3;
      function changeLight(next, timeout) {
         //重设全局变量
         current = next;
         time = timeout;
         //重置灯
         var ds = document.querySelectorAll("span")
         for (var i = 0; i < ds.length; i++) {
            ds[i].className = ""
         }
         //亮灯
         document.getElementById(next).className = "light";
      }
      setInterval(function () {
         time--;
         if (time == 0) { //根据规则 变灯
            switch (current) {
               case "red":
                  changeLight('yellow', 3);
                  break;
               case "yellow":
                  changeLight('green', 8);
                  break;
               case "green":
                  changeLight('red', 10);
                  break;
            }

         }
         document.getElementById('time').innerText = time;
      }, 1000);
   </script>
</body>

</html>